<!--
    @license
    Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/marked-element/marked-element.html">

<polymer-element name="doc-page" attributes="bannerHeight data downloadable">
  <template>
    <link rel="stylesheet" href="../components/highlightjs/styles/default.css">
    <link rel="stylesheet" href="../../css/elements/doc-page.css">
    <div id="main" class="main" on-marked-js-highlight="{{prettyPrint_}}" on-click="{{handleAnchorIdClick}}">
      <h1 data-anchor-id="{{data.name}}">{{data.name}}</h1>

      <template bind="{{data as data}}" if="{{data.extends || data.mixins}}">
        <div class="inheritance">
          <template if="{{data.extends}}">
            <section class="top extends" layout horizontal center>
              <h3 data-anchor-id="{{data.name}}.extends">
                Extends:
                <template repeat="{{e, i in data.extends}}">
                  <template if="{{e.url}}">
                    <a href="{{e.url}}">{{e.name}}</a>
                  </template>
                  <template if="{{!e.url}}">
                    <a href="{{e.name}}.html">{{e.name}}</a>
                  </template>
                  <span hidden?="{{i == data.extends.length - 1}}">,</span>
                </template>
              </h3>
            </section>
          </template>

          <template if="{{data.mixins}}">
            <section class="top mixins" layout horizontal center>
              <h3 data-anchor-id="{{data.name}}.mixins">
                Mixins:
                <template repeat="{{e, i in data.mixins}}">
                  <template if="{{e.url}}">
                    <a href="{{e.url ? e.url : e.name}}">{{e.name}}</a>
                  </template>
                  <template if="{{!e.url}}"><span>{{e.name}}</span></template>
                  <span hidden?="{{i == data.mixins.length - 1}}">,</span>
                </template>
              </h3>
            </section>
          </template>
        </div>
      </template>

      <template if="{{downloadable}}">
        <p layout horizontal center>
          <component-download-button id="downloadButton"
              org="Polymer" component="{{data.name}}"
              label="Get {{data.name}}"></component-download-button>
          <a class="badge" target="_blank"
                           href="{{data.location | getDemoUrl_}}"
                           on-click="{{recordDemoPageview_}}">
            <paper-button raised>Demo</paper-button>
          </a>
        </p>
      </template>

      <template if="{{data.description}}">
        <section class="box top">
          <h3 data-anchor-id="{{data.name}}.summary">Summary</h3>
          <marked-element text="{{data.description}}"></marked-element>
        </section>
      </template>

      <template if="{{data.attributes.length || data.inherited.attributes.length}}">
        <section class="box attribute-box">
          <div class="box-header" layout horizontal center justified>
            <h3 data-anchor-id="{{data.name}}.attributes">Attributes</h3>
            <template if="{{data.inherited.attributes.length}}">
              <button class="inherit-toggle"
                      data-target="#collapse-attributes"
                      on-click="{{toggle_}}">
                Show inherited
              </button>
            </template>
          </div>
          
          <template if="{{data.inherited.attributes.length}}">
            <core-collapse id="collapse-attributes">
              <template repeat="{{parent in data.inherited.attributes}}">
                <template repeat="{{entry in parent.attributes}}">
                  <div class="details details-collapsed" horizontal layout>
                    <div class="details-name" flex>
                      <p><code data-anchor-id="{{data.name}}.attributes.{{entry.name}}">{{entry.name}}</code>
                      </p>
                    </div>
                    <div class="details-info" flex three>
                      <template if="{{entry.type}}">
                        <p layout horizontal center justified>
                          <code>&lt;<em>{{entry.type}}</em>&gt;</code><span class="default" hidden?="{{!entry.default}}">default: <code>{{entry.default}}</code></span>
                        </p>
                      </template>
                      <marked-element text="{{entry.description}}"></marked-element>
                    </div>
                  </div>
                </template>
              </template>
            </core-collapse>
          </template>

          <template repeat="{{attribute in data.attributes}}">
            <div class="details" horizontal layout>
              <div class="details-name" flex>
                <p><code data-anchor-id="{{data.name}}.attributes.{{attribute.name}}">{{attribute.name}}</code></p>
              </div>
              <div class="details-info" flex three>
                <p layout horizontal center justified>
                  <code>&lt;<em>{{attribute.type}}</em>&gt;</code><span class="default" hidden?="{{!attribute.default}}">default: <code>{{attribute.default}}</code></span>
                </p>
                <marked-element text="{{attribute.description}}"></marked-element>
              </div>
            </div>
          </template>
        </section>
      </template>

      <template if="{{data.properties.length || data.inherited.properties.length}}">
        <section class="box property-box">
          <div class="box-header" layout horizontal center justified>
            <h3 data-anchor-id="{{data.name}}.properties">Properties</h3>
            <template if="{{data.inherited.properties.length}}">
              <button class="inherit-toggle"
                      data-target="#collapse-properties"
                      on-click="{{toggle_}}">
                Show inherited
              </button>
            </template>
          </div>

          <template if="{{data.inherited.properties.length}}">
            <core-collapse id="collapse-properties">
              <template repeat="{{parent in data.inherited.properties}}">
                <template repeat="{{entry in parent.properties}}">
                  <div class="details details-collapsed" horizontal layout>
                    <div class="details-name" flex>
                      <p><code data-anchor-id="{{data.name}}.properties.{{entry.name}}">{{entry.name}}</code>
                      </p>
                    </div>
                    <div class="details-info" flex three>
                      <template if="{{entry.type}}">
                        <p layout horizontal center justified>
                          <code>&lt;<em>{{entry.type}}</em>&gt;</code><span class="default" hidden?="{{!entry.default}}">default: <code>{{entry.default}}</code></span>
                        </p>
                      </template>
                      <marked-element text="{{entry.description}}"></marked-element>
                    </div>
                  </div>
                </template>
              </template>
            </core-collapse>
          </template>

          <template repeat="{{property in data.properties}}">
            <div class="details" horizontal layout>
              <div class="details-name" flex>
                <p><code data-anchor-id="{{data.name}}.properties.{{property.name}}">{{property.name}}</code></p>
              </div>
              <div class="details-info" flex three>
                <p layout horizontal center justified>
                  <code>&lt;<em>{{property.type}}</em>&gt;</code><span class="default" hidden?="{{!property.default}}">default: <code>{{property.default}}</code></span>
                </p>
                <marked-element text="{{property.description}}"></marked-element>
              </div>
            </div>
          </template>
        </section>
      </template>

      <template if="{{data.events.length || data.inherited.events.length}}">
        <section class="box event-box">
          <div class="box-header" layout horizontal center justified>
            <h3 data-anchor-id="{{data.name}}.events">Events</h3>
            <template if="{{data.inherited.events.length}}">
              <button class="inherit-toggle"
                      data-target="#collapse-events"
                      on-click="{{toggle_}}">
                Show inherited
              </button>
            </template>
          </div>

          <template if="{{data.inherited.events.length}}">
            <core-collapse id="collapse-events">
              <template repeat="{{parent in data.inherited.events}}">
                <template repeat="{{entry in parent.events}}">
                  <div class="details details-collapsed" horizontal layout>
                    <div class="details-name" flex>
                      <p><code data-anchor-id="{{data.name}}.events.{{entry.name}}">{{entry.name}}</code>
                      </p>
                    </div>
                    <div class="params">
                      <p>Event details:</p>
                      <template repeat="{{param in event.params}}">
                        <p><code>&lt;<em>{{param.type}}</em>&gt; {{param.name}}</code>
                        </p>
                        <p><span>{{param.description}}</span>
                        </p>
                      </template>
                    </div>
                  </div>
                </template>
              </template>
            </core-collapse>
          </template>

          <template repeat="{{event in data.events}}">
            <div class="details" horizontal layout>
              <div class="details-name" flex>
                <p><code data-anchor-id="{{data.name}}.events.{{event.name}}">{{event.name}}</code></p>
              </div>
              <div class="details-info" flex three>
                <marked-element text="{{event.description}}"></marked-element>
                <template if="{{event.params.length}}">
                  <div class="params">
                    <p>Event details:</p>
                    <template repeat="{{param in event.params}}">
                      <p><code>&lt;<em>{{param.type}}</em>&gt; {{param.name}}</code></p>
                      <p><span>{{param.description}}</span></p>
                    </template>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </section>
      </template>

      <template if="{{data.methods.length || data.inherited.methods.length}}">
        <section class="box method-box">
          <div class="box-header" layout horizontal center justified>
            <h3 data-anchor-id="{{data.name}}.methods">Methods</h3>
            <template if="{{data.inherited.methods.length}}">
              <button class="inherit-toggle"
                      data-target="#collapse-methods"
                      on-click="{{toggle_}}">
                Show inherited
              </button>
            </template>
          </div>

          <template if="{{data.inherited.methods.length}}">
            <core-collapse id="collapse-methods">
              <template repeat="{{parent in data.inherited.methods}}">
                <template repeat="{{entry in parent.methods}}">
                  <div class="details details-collapsed" horizontal layout>
                    <div class="details-name" flex>
                      <p><code data-anchor-id="{{data.name}}.methods.{{entry.name}}">{{entry.name}}</code>
                      </p>
                    </div>
                    <div class="details-info" flex three>
                      <marked-element text="{{entry.description}}"></marked-element>
                      <template if="{{entry.params.length}}">
                        <div class="params">
                          <p>Method parameters:</p>
                          <template repeat="{{param in entry.params}}">
                            <p><code>&lt;<em>{{param.type}}</em>&gt; {{param.name}}</code></p>
                            <p><span>{{param.description}}</span></p>
                          </template>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>
              </template>
            </core-collapse>
          </template>

          <template repeat="{{method in data.methods}}">
            <div class="details" horizontal layout>
              <div class="details-name" flex>
                <p><code data-anchor-id="{{data.name}}.methods.{{method.name}}">{{method.name}}</code></p>
              </div>
              <div class="details-info" flex three>
                <marked-element text="{{method.description}}"></marked-element>
                <template if="{{method.params.length}}">
                  <div class="params">
                    <p>Method parameters:</p>
                    <template repeat="{{param in method.params}}">
                      <p><code>&lt;<em>{{param.type}}</em>&gt; {{param.name}}</code></p>
                      <p><span>{{param.description}}</span></p>
                    </template>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </section>
      </template>

    </div>
  </template>
  <script>
  (function() {
    function encodeHTMLEntities_(htmlStr) {
      return htmlStr.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }

    Polymer({
      /**
       * The height of the banner on the home page. Used when scrolling to
       * deep linked anchors.
       *
       * @attribute bannerHeight
       * @type number
       * @default 0
       */
      bannerHeight: 0,

      /**
       * Indicates if the component is in its own top level dir and can be
       * downloaded.
       * core-submenu is inside the core-menu directory and is therefore NOT
       * downloadable.
       *
       * @attribute downloadable
       * @type boolean
       * @default false
       */
      downloadable: false,

      /**
       * Click handler to record a demo page view in Google analytics
       */
      recordDemoPageview_: function(e, detail, sender) {
        window.recordPageview && window.recordPageview(sender.href); // global pollution.
      },

      /**
       * MarkedJS  handler to pretty print code once it has been converted
       * from Markdown
       */
      prettyPrint_: function(e, detail, sender) {
        if (window.prettyPrintOne) {
          detail.code = window.prettyPrintOne(encodeHTMLEntities_(detail.code));
        }
      },

      /**
       * When data for the doc page updates, wait for 200ms, then attempt to
       * scroll to any deep link anchors
       */
      dataChanged: function() {
        // HACK: There is some sort of phantom scrolling going on that will, under some
        // circumstances, scroll back to the top of the page if we scroll down to the
        // anchor element immediately after the data changes. This behavior doesn't
        // happen if we delay for a bit before triggering our scroll.
        // To get around this, we wrap the scrolling in an async with a 200ms delay,
        // similar to what's done in app.js's polymer-ready listener.
        this.async(this.scrollToAnchor_, null, 200);
      },

      /**
       * Look in the URL for a deep link hash. Query for an element with a
       * matching `data-anchor-id` and attempt to scroll to it, accounting for
       * the site's `bannerHeight`
       */
      scrollToAnchor_: function() {
        var anchorId = window.location.hash.slice(1);
        var elementToFocus = this.$.main.querySelector('[data-anchor-id="' + anchorId + '"]');
        if (elementToFocus) {
          // Take the banner height into consideration when calculating where to scroll to.
          // Otherwise, the element would be obscured.
          window.scrollTo(0, elementToFocus.offsetTop - this.bannerHeight);
        }
      },

      /**
       * This handler is invoked on all clicks within the <doc-page>, and checks
       * to see if the element clicked on has an id that can be used as a page
       * anchor. If so, it sets location.hash to that id.
       */
      handleAnchorIdClick: function(e) {
        if (e.target.dataset.anchorId) {
          window.location.hash = e.target.dataset.anchorId;
          this.scrollToAnchor_();
        }
      },

      /**
       * Click handler for the inherited button, which will open/close
       * the core-collapse element containing inherited fields
       */
      toggle_: function(e, detail, sender) {
        // Using shadowRoot instead of $ because when new pages are
        // injected, the $ does not seem to rebuild properly. It only
        // contains the topmost element (#main)
        this.$.main.querySelector(sender.dataset.target).toggle();
      },

      /**
       * Filter to return the element's demo url based on its
       * install location
       */
      getDemoUrl_: function(url) {
        // Given:   0.5/components/core-ajax/core-ajax.html
        // Returns: /0.5/components/core-ajax/demo.html
        return '/' +
               url.split('/').slice(0, -1).join('/') +
               '/demo.html';
      }
    });

  })();
  </script>
</polymer-element>
